<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.针对移动设备，配置如下-->
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!--3.引入jQuery.js 一定要早于bootstrap.js的引入-->
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <!--4.引入bootstrap的相关的css 和js文件-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <!--5.引入table插件的css和js文件-->
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <script type="text/javascript" src="js/bootstrap-table.js"></script>

    <script type="text/javascript">
        $(function(){
            //使用table插件
            $("#table").bootstrapTable({
                url:"/jice/section/showSection",//请求地址
                columns:[
                    {checkbox:true},
                    {title:"编号",field:"section_id"},
                    {title:"科室名字",field:"section_name"},
                    {title:"科室电话",field:"section_mobile"},
                    {title:"所在区域",field:"section_address"},
                    {title:"操作",field:"id",
                        formatter:function(value){
                            console.log(value);
                            return "<button class='btn btn-danger' onclick='deleteById("+value+")'>删除</button><button class='btn btn-primary'onclick='openUpdateModal("+value+")'>更新</button>"
                        }}
                ],
                toolbar:"<button class='btn btn-danger' onclick='handleDelete()'>批量删除</button><button class='btn btn-info' data-toggle='modal' data-target='#add'>添加</button>",
                sortName:"id",
                sortOrder:"desc",

                search:true,
                searchOnEnterKey:true,
                sidePagination:"server",

                pagination:true,
                pageSize:2,
                pageList:[2,5,10,20]
            })
        })
    </script>

    <script type="text/javascript">
        function openUpdateModal(id){
            //发起AJAX请求，获取用户数据
            $.ajax({
                url:"/jice/section/showone",
                data:"id="+id,
                type:"get",
                dataType:"json",
                success:function(result){
                    console.log(result);
                    $("#update input[name=section_id]").val(result.section_id);
                    $("#update input[name=section_name]").val(result.section_name);
                    $("#update input[name=section_mobile]").val(result.section_mobile);
                    $("#update input[name=section_address]").val(result.section_address);
                    //打开模态框
                    $("#update").modal("show");
                }
            })
        }
        function deleteById(id){
            //发起AJAX删除请求
            $.ajax({
                url:"/jice/section/delete",
                data:"id="+id,
                type:"get",
                dataType:"json",
                success:function(result){
                    if(result.status == "success"){
                        $("#table").bootstrapTable("refresh");
                    }else{
                        alert("删除失败！");
                    }
                }
            })
        }

    </script>

    <script type="text/javascript">
        function handleDelete(){

            //1.获取已经选取的行
            var selections=$("#table").bootstrapTable("getSelections");
            console.log(selections);
            var ids=[];
            for(var i=0;i<selections.length;i++){
                ids[i]=selections[i].id;
            }
            var data="";
            for(var i=0;i<ids.length;i++){
                data +=("ids="+ids[i]+"&");
                console.log(ids[i]);
            }
            data=data.substring(0,data.length-1);
            console.log(data);
            //2.发起AJAX的请求，进行批量删除
            $.ajax({
                url:"/jice/section/removesections",
                data:data,
                type:"get",
                dataType:"json",
                success:function(result){
                    //3.处理结果
                    if(result.status=="success"){
                        //删除成功
                        alert("删除成功！");
                        $("#table").bootstrapTable("refresh");
                    }else{
                        alert("删除失败！");
                    }
                }
            });
        }
    </script>
</head>
<body>
<table id="table" class="table table-striped"></table>
<!--添加模态框-->
<div class="modal"  id="add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4>添加</h4>
            </div>
            <div class="modal-body">
                <form  id="addsection" action="" class="form-horizontal">
                    <div class="form-group">
                        <label for="section_name" class="control-label col-sm-6">科室姓名：</label>
                        <div class="col-sm-6">
                            <input type="text" name="section_name"   id="section_name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="section_mobile" class="control-label col-sm-6">科室电话：</label>
                        <div class="col-sm-6"><input type="text" name="section_mobile" id="section_mobile" class="form-control"></div>
                    </div>
                    <div class="form-group">
                        <label for="section_address" class="control-label col-sm-6">所在区域：</label>
                        <div class="col-sm-6"><input type="text" name="section_address" id="section_address" class="form-control"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addsection()">保存</button>
            </div>
        </div>
    </div>
</div>


<!--修改模态框-->
<div class="modal"  id="update">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4>修改</h4>
            </div>
            <div class="modal-body">
                <form  id="updatesection" action="" class="form-horizontal">
                    <div class="form-group">
                        <label for="section_name2" class="control-label col-sm-6">科室：</label>
                        <div class="col-sm-6">
                            <input type="hidden" name="id">
                            <input type="text" name="section_name"   id="section_name2" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="section_mobile2" class="control-label col-sm-6">科室电话：</label>
                        <div class="col-sm-6"><input type="text" name="section_mobile" id="section_mobile2" class="form-control"></div>
                    </div>
                    <div class="form-group">
                        <label for="section_address2" class="control-label col-sm-6">所在区域：</label>
                        <div class="col-sm-6"><input type="text" name="section_adress" id="section_address2" class="form-control"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update()">修改</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function update(){
        $.ajax({
            url:"/jice/section/update",
            data:$("#update").serialize(),
            type:"post",
            dataType:"json",
            success:function(result){
                console.log(result);
                if(result.status=="success"){
                    //关闭模态框
                    $("#update").modal("hide");
                    //刷新表格
                    $("table").bootstrapTable("refresh");
                }else{
                    alert("更新失败！")
                }
            }
        })
    }
    function addperson(){
        //发起添加的AJAX请求
        $.ajax({
            url:"/jice/section/addsection",
            data:$("#addsection").serialize(),
            type:"post",
            dataType:"json",
            success:function(result){
                console.log(result);
                if(result.status=="success"){
                    //关闭模态框
                    $("#add").modal("hide");
                    //刷新表格
                    $("table").bootstrapTable("refresh");
                }else{
                    alert("添加失败！")
                }
            }
        })
    }
</script>
</body>
</html>
